<script>
/* eslint-disable no-unused-vars */

import ButtonList from '@/components/ButtonList'
import TableButtonList from '@/components/TableButtonList'
import WrapTable from '@/components/WrapTable'
import store from './store'
import DialogForm from '@/components/DialogForm'
import Form from '@/components/Form'
import SearchForm from '@/components/SearchForm'
import { commonMixin } from '@/mixins/common'
import { deepClone } from '@/utils'
let timer = null
export default {
  mixins: [store, commonMixin],
  data() {
    return {
      labelWidth: '80px',
      labelWidthDetail: '120px',
      tableTitle: '',
      tableTitleDetail: '用户信息',
      tableOptWidth: '80',
      tableOptDetailWidth: '80',

      tableDefaultSort: { prop: 'funId', order: 'descending' },
      tableSelectionCol: true,
      tableIndexCol: true,
      autoLoad: true,
      showInputFlag: false,
      inputPlaceholder: '',
      btnListWidthPercent: 18,
      btnListWidthOffset: 0,
      searchInputWidthPercent: 6,
      searchInputWidthOffset: 0,
      tableOperate: true,

      tableDefaultSortDetail: { prop: 'funId', order: 'descending' },
      tableSelectionColDetail: true,
      tableIndexColDetail: true,
      autoLoadDetail: false,
      showInputFlagDetail: true,
      inputPlaceholderDetail: '输入用户名称搜索',
      btnListWidthPercentDetail: 18,
      btnListWidthOffsetDetail: 0,
      searchInputWidthPercentDetail: 6,
      searchInputWidthOffsetDetail: 0,
      searchInput: '',
      searchInputDetail: '',
      tableOperateDetail: true,

      rowClickSelect: {},
      selectedList: [],
      selectedListDetail: [],
      dialogType: '',
      dialogTypeDetail: '',
      idKey: 'deptId',
      delIdKey: 'deptId',
      delListIdKey: 'deptIds',
      idKeyDetail: 'userId',
      delIdKeyDetail: 'userId',
      delListIdKeyDetail: 'userIds',

      relatedKey: 'deptId',
      search: '',
      searchKey: '',
      searchDetail: '',
      searchKeyDetail: 'userName',

      limit: 10,
      pagination: true,
      limitDetail: 10,
      pagination_detail: false,
      columns: [
        { prop: 'deptName', label: '部门名称', 'header-align': 'center' },
        { prop: 'deptFunction', label: '部门职能', 'header-align': 'center' },
        { prop: 'deptCode', label: '部门编号', 'header-align': 'center' },
        { prop: 'deptType', label: '部门类型', 'header-align': 'center' },
        { prop: 'telephone', label: '联系电话', 'header-align': 'center' },
        {
          prop: 'buildDate',
          label: '成立日期',
          'header-align': 'center',
          width: '300'
        }
      ],
      columnsDetail: [
        { prop: 'userName', label: '用户名称', 'header-align': 'center' },
        { prop: 'sex', label: '性别', 'header-align': 'center' },
        { prop: 'telephone', label: '联系电话', 'header-align': 'center' },
        { prop: 'email', label: '邮箱', 'header-align': 'center' },
        { prop: 'age', label: '年龄', 'header-align': 'center' },
        { prop: 'idCard', label: '身份证号', 'header-align': 'center' },
        {
          prop: 'address',
          label: '联系地址',
          'header-align': 'center',
          width: '310'
        }
      ],
      searchFields: [
        {
          label: '部门名称',
          prop: 'deptName',
          placeholder: '请输入部门名称',
          anchor: 8
        }
      ],
      searchModel: {
        deptName: ''
      },
      searchBtnList: [
        {
          label: '查询',
          methods: 'handleSearch',
          icon: 'el-icon-search',
          type: 'primary',
          disabled: false
        }
      ],
      toolPanelBtnList: [
        {
          label: '新增',
          methods: 'handleAdd',
          icon: 'el-icon-circle-plus-outline',
          type: 'primary',
          disabled: false
        },
        {
          label: '删除',
          methods: 'handleDelGroup',
          icon: 'el-icon-delete',
          type: 'danger',
          disabled: false
        }
      ],
      toolPanelBtnListDetail: [
        {
          label: '新增',
          methods: 'handleAddDetail',
          icon: 'el-icon-circle-plus-outline',
          type: 'primary',
          disabled: false
        },
        {
          label: '删除',
          methods: 'handleDelGroupDetail',
          icon: 'el-icon-delete',
          type: 'danger',
          disabled: false
        }
      ],
      tableRowBtnList: [
        {
          label: '编辑',
          methods: 'handleEdit',
          icon: 'el-icon-edit-outline',
          type: 'primary',
          key: 'edit',
          align: 'top-start',
          disabled: false
        },
        {
          label: '删除',
          methods: 'handleDelete',
          icon: 'el-icon-delete',
          type: 'danger',
          key: 'delete',
          align: 'top-start',
          disabled: false
        }
      ],
      tableRowBtnListDetail: [
        {
          label: '编辑',
          methods: 'handleEditDetail',
          icon: 'el-icon-edit-outline',
          type: 'primary',
          key: 'edit',
          align: 'top-start',
          disabled: false
        },
        {
          label: '删除',
          methods: 'handleDelete',
          icon: 'el-icon-delete',
          type: 'danger',
          key: 'delete',
          align: 'top-start',
          disabled: false
        }
      ],
      formPanel: {
        add: {
          model: {
            deptName: '',
            deptFunction: '',
            deptCode: '',
            deptType: '',
            telephone: '',
            buildDate: '',
            dataStatus: '1'
          },
          fields: [
            {
              label: '部门名称',
              prop: 'deptName',
              placeholder: '输入部门名称',
              anchor: 24,
              ref: 'funId',
              focus: true
            },
            {
              label: '部门职能',
              prop: 'deptFunction',
              placeholder: '输入部门职能',
              anchor: 24
            },
            {
              label: '部门编号',
              prop: 'deptCode',
              placeholder: '输入部门编号',
              anchor: 24
            },
            {
              label: '部门类型',
              prop: 'deptType',
              placeholder: '输入部门类型',
              anchor: 24
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24
            },
            {
              label: '成立日期',
              prop: 'buildDate',
              placeholder: '输入成立日期',
              anchor: 24
            }
          ],
          rules: {
            deptName: [
              { required: true, message: '请输入部门名称', trigger: 'blur' }
            ]
          },
          title: '新增信息',
          type: 'ADD',
          ref: 'addForm',
          submitBtnList: [
            {
              label: '保存并新增',
              methods: 'handleSubmitAndAdd',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '保存',
              methods: 'handleAddSubmit',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        },
        edit: {
          model: {
            deptId: '',
            deptName: '',
            deptFunction: '',
            deptCode: '',
            deptType: '',
            telephone: '',
            buildDate: '',
            dataStatus: '1'
          },
          fields: [
            {
              label: '部门名称',
              prop: 'deptName',
              placeholder: '输入部门名称',
              anchor: 24,
              ref: 'funId',
              focus: true
            },
            {
              label: '部门职能',
              prop: 'deptFunction',
              placeholder: '输入部门职能',
              anchor: 24
            },
            {
              label: '部门编号',
              prop: 'deptCode',
              placeholder: '输入部门编号',
              anchor: 24
            },
            {
              label: '部门类型',
              prop: 'deptType',
              placeholder: '输入部门类型',
              anchor: 24
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24
            },
            {
              label: '成立日期',
              prop: 'buildDate',
              placeholder: '输入成立日期',
              anchor: 24
            }
          ],
          rules: {
            deptName: [
              { required: true, message: '请输入部门名称', trigger: 'blur' }
            ]
          },
          title: '编辑信息',
          type: 'EDIT',
          ref: 'editForm',
          submitBtnList: [
            {
              label: '保存',
              methods: 'handleEditSubmit',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        },
        look: {
          model: {
            deptName: '',
            deptFunction: '',
            deptCode: '',
            deptType: '',
            telephone: '',
            buildDate: ''
          },
          fields: [
            {
              label: '部门名称',
              prop: 'deptName',
              placeholder: '输入部门名称',
              anchor: 24,
              ref: 'funId',
              disabled: true
            },
            {
              label: '部门职能',
              prop: 'deptFunction',
              placeholder: '输入部门职能',
              anchor: 24,
              disabled: true
            },
            {
              label: '部门编号',
              prop: 'deptCode',
              placeholder: '输入部门编号',
              anchor: 24,
              disabled: true
            },
            {
              label: '部门类型',
              prop: 'deptType',
              placeholder: '输入部门类型',
              anchor: 24,
              disabled: true
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24,
              disabled: true
            },
            {
              label: '成立日期',
              prop: 'buildDate',
              placeholder: '输入成立日期',
              anchor: 24,
              disabled: true
            }
          ],
          rules: {},
          title: '查看信息',
          type: 'LOOK',
          ref: 'lookForm',
          submitBtnList: [
            {
              label: '保存',
              methods: '',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: true
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        }
      },
      formPanelDetail: {
        add: {
          model: {
            userName: '',
            userNo: '',
            sex: '',
            telephone: '',
            email: '',
            age: '',
            idCard: '',
            address: '',
            dataStatus: '1',
            deptId: '',
            groupId: ''
          },
          fields: [
            {
              label: '用户名称',
              prop: 'userName',
              placeholder: '请输入用户名称',
              anchor: 24,
              ref: 'userName',
              focus: true
            },
            {
              label: '用户编号',
              prop: 'userNo',
              placeholder: '请输入用户编号',
              anchor: 24
            },
            { label: '性别', prop: 'sex', placeholder: '输入性别', anchor: 24 },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24
            },
            {
              label: '邮箱',
              prop: 'email',
              placeholder: '请输入邮箱',
              anchor: 24
            },
            {
              label: '年龄',
              prop: 'age',
              placeholder: '输入出生年月',
              anchor: 24
            },
            {
              label: '身份证号',
              prop: 'idCard',
              placeholder: '输入身份证号',
              anchor: 24
            }
          ],
          rules: {
            userName: [
              { required: true, message: '请输入用户名称', trigger: 'blur' }
            ],
            userNo: [
              { required: true, message: '请输入用户编号', trigger: 'blur' }
            ]
          },
          title: '新增信息',
          type: 'ADDDETAIL',
          ref: 'addFormDetail',
          submitBtnList: [
            {
              label: '保存并新增',
              methods: 'handleSubmitAndAddDetail',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '保存',
              methods: 'handleAddSubmitDetail',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        },
        edit: {
          model: {
            userName: '',
            userNo: '',
            sex: '',
            telephone: '',
            email: '',
            age: '',
            idCard: '',
            dataStatus: '1',
            deptId: ''
          },
          fields: [
            {
              label: '用户名称',
              prop: 'userName',
              placeholder: '请输入用户名称',
              anchor: 24,
              ref: 'funId',
              focus: true
            },
            {
              label: '用户编号',
              prop: 'userNo',
              placeholder: '请输入用户编号',
              anchor: 24
            },
            { label: '性别', prop: 'sex', placeholder: '输入性别', anchor: 24 },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24
            },
            {
              label: '邮箱',
              prop: 'email',
              placeholder: '请输入邮箱',
              anchor: 24
            },
            {
              label: '年龄',
              prop: 'age',
              placeholder: '输入出生年月',
              anchor: 24
            },
            {
              label: '身份证号',
              prop: 'idCard',
              placeholder: '输入身份证号',
              anchor: 24
            }
          ],
          rules: {
            userName: [
              { required: true, message: '请输入用户名称', trigger: 'blur' }
            ],
            userNo: [
              { required: true, message: '请输入用户编号', trigger: 'blur' }
            ]
          },
          title: '编辑信息',
          type: 'EDITDETAIL',
          ref: 'editFormDetail',
          submitBtnList: [
            {
              label: '保存',
              methods: 'handleEditSubmitDetail',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        },
        look: {
          model: {
            userName: '',
            userNo: '',
            sex: '',
            telephone: '',
            email: '',
            age: '',
            idCard: ''
          },
          fields: [
            {
              label: '用户名称',
              prop: 'userName',
              placeholder: '请输入用户名称',
              anchor: 24,
              ref: 'funId',
              disabled: true
            },
            {
              label: '用户编号',
              prop: 'userNo',
              placeholder: '请输入用户编号',
              anchor: 24,
              disabled: true
            },
            {
              label: '性别',
              prop: 'sex',
              placeholder: '输入性别',
              anchor: 24,
              disabled: true
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24,
              disabled: true
            },
            {
              label: '邮箱',
              prop: 'email',
              placeholder: '请输入邮箱',
              anchor: 24,
              disabled: true
            },
            {
              label: '年龄',
              prop: 'age',
              placeholder: '输入出生年月',
              anchor: 24,
              disabled: true
            },
            {
              label: '身份证号',
              prop: 'idCard',
              placeholder: '输入身份证号',
              anchor: 24,
              disabled: true
            }
          ],
          rules: {},
          title: '查看信息',
          type: 'LOOKDETAIL',
          ref: 'lookFormDetail',
          submitBtnList: [
            {
              label: '保存',
              methods: '',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: true
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        }
      }
    }
  },
  computed: {
    data() {
      return this.store.data
    },
    total() {
      return this.store.total
    },
    dataDetail() {
      return this.storeDetail.data
    },
    totalDetail() {
      return this.storeDetail.total
    }
  },
  components: {
    SearchForm,
    WrapTable,
    DialogForm,
    Form,
    ButtonList,
    TableButtonList
  },
  methods: {
    // 点击行获取部门id
    handleRowClick(row) {
      timer = setTimeout(() => {
        if (row) {
          this.rowClickSelect = row
          this.formPanelDetail.add.model[this.relatedKey] = row[this.relatedKey]
          this.$refs.tableDetail.load(1, this.storeDetail.limit)
          this.planId = row.planId
        }
      }, 250)
    },
    handleAddDetail() {
      // 显示之前 判断有没有选择部门
      // if (!this.rowClickSelect[this.relatedKey]) {
      //   return this.$message.warning("您还没有选择部门")
      // }
      this.formPanelDetail.add.model[this.relatedKey] = this.rowClickSelect[
        this.relatedKey
      ]
      this.dialogTypeDetail = this.formPanelDetail.add.type // 对应的模态框显示
      this.$nextTick(() => {
        this.$refs.addFormDetail && this.$refs.addFormDetail.resetFields()
      })
    },
    handleAddSubmitDetail() {
      return this.$refs.addFormDetail
        .validate()
        .then(() => {
          return this.add(this.addUrlDetail, this.formPanelDetail.add.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.tableDetail.load(1, this.storeDetail.limit)
            this.dialogTypeDetail = ''
          } else {
            throw new Error(message)
          }
        })
        .catch(error => {
          console.log(error)
          return Promise.reject(error)
        })
    },
    handleSubmitAndAddDetail() {
      return this.$refs.addFormDetail
        .validate()
        .then(() => {
          return this.add(this.addUrlDetail, this.formPanelDetail.add.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.tableDetail.load(1, this.storeDetail.limit)
            this.$refs.addFormDetail && this.$refs.addFormDetail.resetFields()
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleDelGroupDetail() {
      if (this.selectedListDetail.length === 0) {
        this.$message({
          type: 'info',
          message: '没有要删除的数据'
        })
        return Promise.reject(new Error('没有要删除的数据'))
      }
      const userIds = this.selectedListDetail
        .map(item => {
          return item[this.delIdKeyDetail]
        })
        .join(',')
      return this.$confirm(
        '此操作不能回退，确认要删除您选中的数据么?',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      )
        .then(() => {
          const params = {}
          params[this.delListIdKeyDetail] = userIds
          return this.delList(this.delListUrlDetail, params)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.tableDetail.load(1, this.storeDetail.limit)
            this.$refs.table_detail.clearSelection()
          }
        })
        .catch(error => {
          this.$message({
            type: 'info',
            message: error === 'cancel' ? '已取消删除' : error
          })
          return Promise.reject(error)
        })
    },
    handleDeleteDetail(row) {
      return this.$confirm(
        '此操作不能回退，确认要删除您选中的数据么?',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      )
        .then(() => {
          const params = {}
          params[this.delIdKeyDetail] = row[this.delIdKeyDetail]
          return this.del(this.delUrlDetail, params)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.tableDetail.load(1, this.storeDetail.limit)
          }
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
        })
        .catch(error => {
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
          this.$message({
            type: 'info',
            message: error === 'cancel' ? '已取消删除' : error
          })
          return Promise.reject(error)
        })
    },
    handleEditDetail(row) {
      const params = {}
      params[this.idKeyDetail] = row[this.idKeyDetail]
      return this.checkDetail(params)
        .then(({ success, message, data }) => {
          if (success) {
            Object.assign(
              this.formPanelDetail.edit.model,
              this.editModelDetailInitialData
            )
            for (const key in this.formPanelDetail.edit.model) {
              this.$set(this.formPanelDetail.edit.model, key, data[key])
            }
            this.dialogTypeDetail = this.formPanelDetail.edit.type
            return data
          } else {
            this.$message({
              type: 'error',
              message
            })
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleEditSubmitDetail() {
      return this.$refs.editFormDetail
        .validate()
        .then(() => {
          return this.update(
            this.updateUrlDetail,
            this.formPanelDetail.edit.model
          )
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.tableDetail.load(1, this.storeDetail.limit)
            this.dialogTypeDetail = ''
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleCurrentChangeDetail(row) {
      this.dialogTypeDetail = this.formPanelDetail.look.type
      this.$nextTick(() => {
        this.$refs.lookFormDetail && this.$refs.lookFormDetail.resetFields()
        Object.keys(row).forEach(key => {
          this.$set(this.formPanelDetail.look.model, key, row[key])
        })
      })
    },
    handleSelectionChangeDetail(val) {
      this.selectedListDetail = val
    },
    getData({ page, limit }) {
      this.store.read({ start: page, limit: limit })
    },
    getDataDetail({ page = 1, limit = 10 }) {
      const params = {}
      params['q_' + this.relatedKey] = this.rowClickSelect[this.relatedKey]
      params['q_' + this.searchKeyDetail] = this.searchDetail
      params['start'] = page
      this.pagination_detail
        ? (params['limit'] = limit)
        : (params['limit'] = '')
      this.storeDetail.read(params)
    },
    handleSearch(data) {
      if (data) {
        for (const k in data) {
          if (data.hasOwnProperty(k)) {
            this.store._searchParams['q_' + k] = data[k]
          }
        }
        this.$refs.table.load(1, this.store.limit)
      }
    },
    handleSearchReset() {
      this.$refs.searchForm.onReset()
    },
    handleAdd() {
      this.dialogType = this.formPanel.add.type
      this.$nextTick(() => {
        this.$refs.addForm && this.$refs.addForm.resetFields()
      })
    },
    handleDelGroup() {
      if (this.selectedList.length === 0) {
        this.$message({
          type: 'info',
          message: '没有要删除的数据'
        })
        return Promise.reject(new Error('没有要删除的数据'))
      }
      const deptIds = this.selectedList
        .map(item => {
          return item[this.delIdKey]
        })
        .join(',')
      return this.$confirm(
        '此操作不能回退，确认要删除您选中的数据么?',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      )
        .then(() => {
          const params = {}
          params[this.delListIdKey] = deptIds
          return this.delList(this.delListUrl, params)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load(1)
            this.$refs.table.clearSelection()
          }
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
        })
        .catch(error => {
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
          this.$message({
            type: 'info',
            message: error === 'cancel' ? '已取消删除' : error
          })
          return Promise.reject(error)
        })
    },
    handleCurrentChange(row) {
      timer = clearTimeout(timer)
      this.dialogType = this.formPanel.look.type
      this.$nextTick(() => {
        Object.keys(row).forEach(key => {
          // const value = (key === 'buildDate' || key === 'createdTime' || key === 'updatedTime') ? parseTime(row[key]) : row[key] // 如果为成立时间，则格式化日期，否则照常返回
          this.$set(this.formPanel.look.model, key, row[key])
        })
      })
    },
    handleEdit(row) {
      const params = {}
      params[this.idKey] = row[this.idKey]
      return this.check(params)
        .then(({ success, message, data }) => {
          if (success) {
            Object.assign(this.formPanel.edit.model, this.editModelInitialData)
            for (const key in this.formPanel.edit.model) {
              this.$set(this.formPanel.edit.model, key, data[key])
            }
            this.dialogType = this.formPanel.edit.type
            return data
          } else {
            this.$message({
              type: 'error',
              message
            })
            return new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleDelete(row) {
      return this.$confirm(
        '此操作不能回退，确认要删除您选中的数据么?',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      )
        .then(() => {
          const params = {}
          params[this.delIdKey] = row[this.delIdKey]
          return this.del(this.delUrl, params)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load(1)
          }
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
        })
        .catch(error => {
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
          this.$message({
            type: 'info',
            message: error === 'cancel' ? '已取消删除' : error
          })
          return Promise.reject(error)
        })
    },
    handleSelectionChange(val) {
      this.selectedList = val
    },
    handleSubmitAndAdd() {
      return this.$refs.addForm
        .validate()
        .then(() => {
          return this.add(this.addUrl, this.formPanel.add.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load(1)
            this.$refs.addForm && this.$refs.addForm.resetFields()
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleAddSubmit() {
      return this.$refs.addForm
        .validate()
        .then(() => {
          return this.add(this.addUrl, this.formPanel.add.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load(1)
            this.dialogType = ''
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleEditSubmit() {
      return this.$refs.editForm
        .validate()
        .then(() => {
          return this.update(this.updateUrl, this.formPanel.edit.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load()
            this.dialogType = ''
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleCancel() {
      this.$refs.addForm && this.$refs.addForm.clearValidate()
      this.$refs.editForm && this.$refs.editForm.clearValidate()
      this.$refs.addFormDetail && this.$refs.addFormDetail.clearValidate()
      this.$refs.editFormDetail && this.$refs.editFormDetail.clearValidate()
      this.dialogType = ''
      this.dialogTypeDetail = ''
    },
    handleDialogClose() {
      this.dialogType = ''
    },
    handleDialogDetailClose() {
      this.dialogTypeDetail = ''
    },
    handleInputClick(_ev, _val) {},
    handleInputClickDetail(ev, val) {
      const params = {}
      params[this.relatedKey] = this.rowClickSelect[this.relatedKey]
      params[this.searchKeyDetail] = val.trim()
      this.storeDetail.read(params)
    },
    renderOperateBtns(row) {
      return (
        <TableButtonList
          operateBtnList={this.tableRowBtnList}
          props-model={row}
        />
      )
    },
    // 父表
    renderWrapTable(h) {
      return (
        <WrapTable
          ref='table'
          getData={this.getData}
          total={this.total}
          data={this.data}
          limitNum={this.limit}
          fields={this.columns}
          selectionCol={this.tableSelectionCol}
          indexCol={this.tableIndexCol}
          pagination={this.pagination}
          autoLoad={this.autoLoad}
          tooltip-effect='dark'
          border
          stripe
          class='border-bottom'
          default-sort={this.tableDefaultSort}
          highlight-current-row
          on-current-change={this.handleRowClick}
          on-selection-change={this.handleSelectionChange}
          on-row-dblclick={this.handleCurrentChange}>
          {this.searchBtnList && this.searchBtnList.length > 0 ? (
            <SearchForm
              items={this.searchFields}
              props-model={this.searchModel}
              slot='searchPanel'
              ref='searchForm'>
              <ButtonList
                operateBtnList={this.searchBtnList}
                props-model={this.searchModel}
              />
            </SearchForm>
          ) : (
            ''
          )}
          <c-row slot='toolPanel' class='toolPanel'>
            {this.tableTitle ? <div class='title'>{this.tableTitle}</div> : ''}
            {this.toolPanelBtnList && this.toolPanelBtnList.length ? (
              <c-col
                span={this.btnListWidthPercent}
                offset={this.btnListWidthOffset}>
                <ButtonList operateBtnList={this.toolPanelBtnList}></ButtonList>
              </c-col>
            ) : (
              ''
            )}
            <c-col
              span={this.searchInputWidthPercent}
              offset={this.searchInputWidthOffset}
              justify='end'>
              {this.showInputFlag ? (
                <c-input
                  class='search-input'
                  placeholder={this.inputPlaceholder}
                  size='small'
                  v-model={this.searchInput}
                  on-input={event => {
                    this.searchInput = event
                  }}
                  nativeOnKeydown={ev => {
                    ev.keyCode === 13
                      ? this.handleInputClick(ev, this.searchInput)
                      : null
                  }}>
                  <i
                    slot='suffix'
                    class='el-input__icon el-icon-search'
                    on-click={ev =>
                      this.handleInputClick(ev, this.searchInput)
                    }></i>
                </c-input>
              ) : (
                ''
              )}
            </c-col>
          </c-row>

          {this.tableOperate ? (
            <c-table-column
              label='操作'
              align='center'
              slot='toolbar'
              width={this.tableOptWidth}
              fixed='right'
              {...{
                scopedSlots: {
                  default: ({ row }) => this.renderOperateBtns(row)
                }
              }}
            />
          ) : null}
        </WrapTable>
      )
    },
    renderOperateBtnsDetail(row) {
      return (
        <TableButtonList
          operateBtnList={this.tableRowBtnListDetail}
          props-model={row}
        />
      )
    },
    // 子表
    renderWrapTableChild(h) {
      const self = this
      return (
        <WrapTable
          ref='tableDetail'
          getData={this.getDataDetail}
          total={this.totalDetail}
          data={this.dataDetail}
          limitNum={this.limitDetail}
          fields={this.columnsDetail}
          selectionCol={this.tableSelectionColDetail}
          indexCol={this.tableIndexColDetail}
          pagination={this.pagination_detail}
          autoLoad={this.autoLoadDetail}
          tooltip-effect='dark'
          border
          stripe
          default-sort={this.tableDefaultSortDetail}
          highlight-current-row
          on-selection-change={this.handleSelectionChangeDetail}
          on-row-dblclick={this.handleCurrentChangeDetail}>
          <c-row slot='toolPanel' class='toolPanel'>
            {this.tableTitleDetail ? (
              <div class='title'>{this.tableTitleDetail}</div>
            ) : (
              ''
            )}
            {this.toolPanelBtnListDetail &&
            this.toolPanelBtnListDetail.length ? (
                <c-col
                  span={this.btnListWidthPercentDetail}
                  offset={this.btnListWidthOffsetDetail}>
                  <ButtonList
                    operateBtnList={this.toolPanelBtnListDetail}></ButtonList>
                </c-col>
              ) : (
                ''
              )}
            <c-col
              span={this.searchInputWidthPercentDetail}
              offset={this.searchInputWidthOffsetDetail}
              justify='end'>
              {this.showInputFlagDetail ? (
                <c-input
                  class='search-input'
                  placeholder={this.inputPlaceholderDetail}
                  size='small'
                  v-model={this.searchInputDetail}
                  on-input={event => {
                    this.searchInputDetail = event
                  }}
                  nativeOnKeydown={ev => {
                    ev.keyCode === 13
                      ? this.handleInputClickDetail(ev, this.searchInputDetail)
                      : null
                  }}>
                  <i
                    slot='suffix'
                    class='el-input__icon el-icon-search'
                    on-click={ev =>
                      this.handleInputClickDetail(ev, this.searchInputDetail)
                    }></i>
                </c-input>
              ) : (
                ''
              )}
            </c-col>
          </c-row>
          {this.tableOperateDetail ? (
            <c-table-column
              label='操作'
              align='center'
              slot='toolbar'
              width={this.tableOptDetailWidth}
              {...{
                scopedSlots: {
                  default: ({ row }) => this.renderOperateBtnsDetail(row)
                }
              }}
            />
          ) : null}
        </WrapTable>
      )
    },
    renderDialogForm(h) {
      return this._l(this.formPanel, item => {
        return (
          <DialogForm
            width='660px'
            key={item.type}
            visible={this.dialogType === item.type}
            title={item.title}
            on-close={this.handleDialogClose}>
            <Form
              ref={item.ref}
              items={item.fields}
              inline={false}
              props-model={item.model}
              labelWidth={this.labelWidth}
              rules={item.rules}
            />
            <c-form ref='form' slot='footer'>
              <c-form-item class='submit-btn'>
                <ButtonList operateBtnList={item.submitBtnList} />
              </c-form-item>
            </c-form>
          </DialogForm>
        )
      })
    },
    renderDialogFormChild(h) {
      return this._l(this.formPanelDetail, item => {
        return (
          <DialogForm
            width='660px'
            key={item.type}
            visible={this.dialogTypeDetail === item.type}
            title={item.title}
            on-close={this.handleDialogDetailClose}>
            <Form
              ref={item.ref}
              items={item.fields}
              inline={false}
              props-model={item.model}
              labelWidth={this.labelWidthDetail}
              rules={item.rules}
            />
            <c-form ref='form' slot='footer'>
              <c-form-item class='submit-btn'>
                <ButtonList operateBtnList={item.submitBtnList} />
              </c-form-item>
            </c-form>
          </DialogForm>
        )
      })
    },
    renderCustom(h) {
      return this._e()
    }
  },

  created() {
    // 对初始 this.formPanel.edit.model 进行深拷贝
    // 对初始 this.formPanelDetail.edit.model 进行深拷贝
    this.editModelInitialData = deepClone(this.formPanel.edit.model)
    this.editModelDetailInitialData = deepClone(this.formPanelDetail.edit.model)
  },

  render(h) {
    return (
      <div class='subtable-container'>
        {this.renderWrapTable(h)}
        {this.renderDialogForm(h)}
        {this.renderWrapTableChild(h)}
        {this.renderDialogFormChild(h)}
        {this.renderCustom(h)}
      </div>
    )
  }
}
</script>
